<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
  <!--  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>-->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #example {
            position: absolute;
            left: 160px;
            top: 160px;
            width: 300px;
            height: 200px;
            overflow: auto;
            border: 25px solid #F0E68C;
            padding: 20px;
            margin: 20px;
        }
        #mouse-wrap {
            position: absolute;
            left:300px;
            top:5px;
        }
        .key {
            cursor: pointer;
            text-decoration: underline;
        }
    </style>

</head>
<body>


<div id="example">
    <h3>Introduction</h3>
    <p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0.</p>

    <p>The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.</p>

    <p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.</p>

    <p>The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.</p>

</div>


<div id="mouse-wrap">mouse coords <span id="mouse"></span></div>
<div id="info"></div>


<script type="text/javascript">
    var example = document.getElementById('example')

  //  $(function() {
        var info = document.getElementById('info')

        var props = {
            'size':
                    ['clientLeft','clientTop', 'clientWidth','clientHeight','offsetWidth','offsetHeight','scrollWidth', 'scrollHeight'],
            'current scroll':
                    ['scrollLeft','scrollTop'] ,
            'position':
                    ['offsetLeft','offsetTop']
        }

        info.innerHTML = '<h3>Click to see the value:</h3>'
        for (var k in props) {
            info.innerHTML += '<h4>' + k + '</h4>'
            var prop = props[k]
            for (var i = 0; i < prop.length; i++) {
                info.innerHTML += "<span class='key'>"+prop[i]+'</span>: <span id="'+prop[i]+'">&nbsp;</span>' + " "
                i++
                info.innerHTML += "<span class='key'>"+prop[i]+'</span>: <span id="'+prop[i]+'">&nbsp;</span>' + "<br/>"

            }
        }
        var keys=document.getElementsByClassName("key");
        for(var i=0;i<keys.length;i++){
            keys[i].addEventListener("click",function(){
        //$(document).delegate('span.key','click', function() {
                var prop = this.innerHTML;
                document.getElementById(prop).innerHTML=example[prop];
                //$('#'+prop).html(example[prop])
            })
        }

//    })

    document.onmousemove = function(e) {
        e = e || window.event
        document.getElementById('mouse').innerHTML = e.clientX+':'+e.clientY
    }


</script>

</body>
</html>